<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <style>
      .red {
        color: red;
      }
      .thin {
        font-weight: 200;
      }
      .italic {
        font-style: italic;
      }
      .active {
        /* 设置中文字符间距 */
        letter-spacing: 0.5em;

        /* 设置英文字符间距 */
        /* word-spacing */
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--<h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1>-->

      <!--第一种使用方式，直接传递一个数组，注意：这里的 class 需要使用 v-bind 做数据绑定-->
      <!--<h1 :class="['thin','italic']" v-text="msg"></h1>-->

      <!--在数组中使用三元表达式-->
      <!--<h1 :class="['thin','italic',flag?'active':'']" v-text="msg"></h1>-->

      <!--在数组中使用 对象来代替三元表达式，提高代码的可读性-->
      <!--<h1 :class="['thin','italic',{'active':flag}]" v-text="msg"></h1>-->

      <!--在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于对象的属性可带引号，可不带引号，
        所以这里我没有写引号：属性的值 是一个标识符-->
      <h1 :class="classObj" v-text="msg"></h1>
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          flag: true,
          msg: "这是一个很大很大的H1，大到你无法想象！！！",
          classObj: { red: true, thin: true, italic: false, active: false }
        },
        methods: {}
      });
    </script>
  </body>
</html>
